import React, { Component } from 'react'
import style from "./list.module.css";

import {
    withRouter //高阶组件，为没有路由的组件提供路由【是一个函数】
} from "react-router-dom"

import { Image } from "react-vant"

// "onSale", "forSale", "soldOut", "newCom"
const stateObj = {
    "onSale": "在售",
    "forSale": "待售",
    "soldOut": "售完",
    "newCom": "新楼盘"
}

// 所有的页面有路由，组件无路由，找withRouter
export class List extends Component {
    render() {
        const { list } = this.props;
        return (
            <div>
                {
                    list.length ?
                        list.map(item => {
                            return <li
                                key={item.id}
                                onClick={() => {
                                    console.log("跳详情", this.props);
                                    // 跳到详情页 
                                    this.props.history.push("/detail/" + item.id)

                                }}
                            >
                                <img src={item.img} alt="" />
                                {/* <Image
                                    src={item.ing}
                                    alt=""
                                    errorIcon={<div style={{ fontSize: 14 }}>暂无图片</div>}
                                    lazyload={ true }
                                /> */}
                                <div>
                                    <h3>{item.title}</h3>
                                    <p>{item.price}</p>
                                    <button className={style[item.state]}>{stateObj[item.state]}</button>
                                </div>
                            </li>
                        }) : "暂无房源"
                }
            </div>
        )
    }
}

export default withRouter(List)